<script>
export default {
  name: 'scopeDel',
  data() {
    return {
      center: {},
      scopeParams: {
        bid: '',
        created: '',
        latitude: '',
        longitude: '',
        polygon: [],
        type: 2,
        updated: ''
      },
      courierDetail: {},
      polygonPath: [],
      showScope: false,
      keyword: ''
    }
  },
  methods: {
    /*
    *
    * 获取快递员作业范围的回调函数
    *  */
    async fetchScope() {
      try {
        const scope = await this.$store.dispatch('institutionsAreaStore/fetchBusinessScopeAction', { id: this.id, type: 2 })
        this.scopeParams = scope
        this.polygonPath = scope.polygon.map(item => ({ lat: Number(item.latitude), lng: Number(item.longitude) }))
        this.center = { lat: scope.latitude, lgn: scope.longitude }
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /*
    * 获取快递员详情的回调函数
    *  */
    async fetchCourier() {
      try {
        const courierDetail = await this.$store.dispatch('deliverymanStore/fetchCourierAction', this.id)
        this.courierDetail = courierDetail
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /*
    * 编辑快递员作业范围的回调函数
    *  */
    editScope() {
      this.showScope = true
    },
    /*
    *
    * 保存快递员作业范围的回调函数
    *  */
    async submitScope() {
      try {
        this.scopeParams.polygon = this.polygonPath.map(item => ({ latitude: Number(item.lat), longitude: Number(item.lng) }))
        const addResult = await this.$store.dispatch('institutionsAreaStore/addScopeAction', this.scopeParams)
        this.$message.success(addResult)
        this.showScope = false
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    updatePolygonPath(e) {
      this.polygonPath = e.target.getPath()
    }
  },
  mounted() {
    this.fetchScope()
    this.fetchCourier()
  },
  computed: {
    id() {
      return this.$route.query.id
    }
  }
}
</script>

<template>
  <div class="scope-del">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <div class="left">
          <span>作业范围分配</span>
        </div>
        <div class="right">
          <el-button type="primary" @click="editScope" icon="el-icon-edit">编辑作业范围</el-button>
          <el-button type="primary" @click="submitScope" icon="el-icon-edit">保存作业范围</el-button>
        </div>
      </div>
      <div class="input">
        <el-input placeholder="请输入地区的关键字"></el-input>
        <el-button type="primary" icon="el-icon-search">搜索地区</el-button>
      </div>

      <el-row :gutter="20" style="margin: 30px 0">
        <el-col :span="5">
          <span class="label">快递员名字:</span>
          <span class="value">{{ courierDetail.name }}</span>
        </el-col>
        <el-col :span="5">
          <span class="label">岗位名称:</span>
          <span class="value">{{ courierDetail.stationName }}</span>
        </el-col>
        <el-col :span="5">
          <span class="label">工作状态:</span>
          <span class="value">{{ courierDetail.workStatus === 1 ? '上班' : '休息' }}</span>
        </el-col>
        <el-col :span="5">
          <span class="label">所属机构:</span>
          <span class="value">{{ courierDetail.agency.name }}</span>
        </el-col>
      </el-row>

      <div class="map">
        <baidu-map class="map-view" :zoom="13" :center="'北京'" inertial-dragging :scroll-wheel-zoom="true">
          <bm-panorama anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-panorama>
          <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
          <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
          <bm-polygon v-if="scopeParams" :path="polygonPath" stroke-color="#e15536" :stroke-opacity="1" :stroke-weight="5" :editing="true" @lineupdate="updatePolygonPath"/>
          <bm-local-search :panel="false" :keyword="keyword" :auto-viewport="true"></bm-local-search>
        </baidu-map>
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.scope-del {
  padding: 20px;

  .clearfix {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      flex: 1;
    }

    .right {
      width: 50%;
      display: flex;
      justify-content: end;
    }
  }

  .input {
    .el-input {
      width: 300px;
      margin-right: 10px;
    }
  }

  .value {
    font-size: 14px;
    color: #818693;

  }

  .map {
    width: 100%;
    height: 520px;
    margin-top: 10px;

    .map-view {
      width: 100%;
      height: 520px;

    }
  }
}
</style>
